<template>
    <div v-loading="loading">
        <div class="search">
            <el-form :model="form">
                <el-row :gutter="30">
                    <el-col :span="6">
                        <el-form-item label="区域位置">
                            <el-select v-model="form.areaLocation" style="width: 100%" placeholder="请选择区域位置">
                                <el-option v-for="item in loactionOption" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="日期">
                            <el-date-picker :clearable="false" style="width: 100%" v-model="form.time" type="date"
                                placeholder="请选择日期" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="报表类型">
                            <el-select style="width: 100%" v-model="form.reportType" placeholder="请选择报表类型">
                                <el-option label="日报" :value="1" />
                                <el-option label="周报" :value="2" />
                                <el-option label="月报" :value="3" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" class="create" @click="search">生成</el-button>
                        <el-button type="primary" class="create" @click="down">下载</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="box" id="box">
            <div class="page" ref="htmlDom">
                <div class="box-title">
                    <label class="box-title-type"> 区域运维{{ typeName }}报 </label>
                    <label class="box-title-loaction"> 区域位置：{{ locationName }} 生成报表时间: {{ time }} </label>
                </div>
                <div class="boxs">
                    <label class="box-text">一、设备信息</label>
                    <div class="table">
                        <table>
                            <tr>
                                <td>设备编号</td>
                                <td>设备名称</td>
                            </tr>
                            <tr v-for="item in data.detail">
                                <td>{{ item.code }}</td>
                                <td>{{ item.name }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="boxs">
                    <label class="box-text">二、运行保障</label>
                    <div class="table">
                        <table>
                            <tr>
                                <td>设备编号</td>
                                <td>运行时长</td>
                                <td>运行时长占比</td>
                            </tr>
                            <tr v-for="item in data.guarantee">
                                <td>{{ item.code }}</td>
                                <td>{{ item.time }}</td>
                                <td>{{ item.rate }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="boxs">
                    <label class="box-text">三、状态监测</label>
                    <div class="box-text-small">1、各设备健康度</div>
                    <div class="table">
                        <table>
                            <tr>
                                <td>设备编号</td>
                                <td>设备名称</td>
                                <td>设备当{{ typeName }}健康度</td>
                                <td>设备当{{ typeName }}健康趋势</td>
                            </tr>
                            <tr v-for="item in data.healthDegre">
                                <td>{{ item.name }}</td>
                                <td>{{ item.code }}</td>
                                <td>{{ item.value }}</td>
                                <td>{{ item.trend }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="box-text-small">2、异常情况盘点</div>
                    <div class="table">
                        <table>
                            <tr>
                                <td>设备编号</td>
                                <td>设备名称</td>
                                <td>设备当{{ typeName }}异常点数量</td>
                                <td>设备当{{ typeName }}异常点变化量</td>
                            </tr>
                            <tr v-for="item in data.exception">
                                <td>{{ item.name }}</td>
                                <td>{{ item.code }}</td>
                                <td>{{ item.total }}</td>
                                <td>{{ item.trend }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="boxs">
                    <label class="box-text">四、基础运维</label>
                    <div class="box-text-small">1、计划统计</div>
                    <div class="table">
                        <table>
                            <tr>
                                <td>设备编号</td>
                                <td>设备名称</td>
                                <td>本{{ typeName }}计划数</td>
                            </tr>
                            <tr v-for="item in data.plan">
                                <td>{{ item.code }}</td>
                                <td>{{ item.name }}</td>
                                <td>{{ item.secondTotal }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="box-text-small">2、工单数量统计</div>
                    <div class="table">
                        <table>
                            <tr>
                                <td colspan="3">工单总数</td>
                                <td>{{ data.workOrder.total }}</td>
                            </tr>
                            <tr>
                                <td rowspan="4">报修工单</td>
                                <td colspan="2">总数</td>
                                <td>{{ data.workOrder.repairOrder.total }}</td>
                            </tr>
                            <tr>
                                <td colspan="2">已完成工单数</td>
                                <td>{{ data.workOrder.repairOrder.finishd }}</td>
                            </tr>
                            <tr>
                                <td rowspan="2">新增工单数</td>
                                <td>人工报修工单</td>
                                <td>{{ data.workOrder.repairOrder.labor }}</td>
                            </tr>
                            <tr>
                                <td>智能报修工单</td>
                                <td>{{ data.workOrder.repairOrder.aI }}</td>
                            </tr>
                            <tr>
                                <td rowspan="3">维保工单</td>
                                <td colspan="2">总数</td>
                                <td>{{ data.workOrder.maintainOrder.total }}</td>
                            </tr>
                            <tr>
                                <td colspan="2">已完成工单数</td>
                                <td>{{ data.workOrder.maintainOrder.finishd }}</td>
                            </tr>
                            <tr>
                                <td colspan="2">新增计划维保工单数</td>
                                <td>{{ data.workOrder.maintainOrder.addOrderTotal }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import PdfLoader from "@/utils/utils.js";
import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
import { ref, onMounted } from "vue";
import { getdatas } from "@/utils/tiemChange.js";
import { getequipmentarealocationlist } from "@/service/api/equipmentManagement.js";
import { getDate, getMonday, getMonth } from "./timechange.js";
import { getequipmentmaintainreportdata } from "@/service/api/egionalOperationAndMaintenanceReport.js";
const htmlDom = ref(null);
const typeName = ref("日");
const time = ref();
const form = ref({
    areaLocation: "",
    time: "",
    reportType: 1,
    startDate: "",
    endDate: ""
});
const loactionOption = ref([{ label: "全部区域", value: null }]);
const data = ref({
    detail: [
        {
            name: "",
            code: ""
        }
    ],
    guarantee: [
        {
            name: "",
            code: "",
            time: "",
            rate: ""
        }
    ],
    healthDegre: [
        {
            name: "",
            code: "",
            value: "",
            trend: ""
        }
    ],
    exception: [
        {
            name: "",
            code: "",
            total: "",
            trend: ""
        }
    ],
    plan: [
        {
            name: "",
            code: "",
            secondTotal: ""
        }
    ],
    workOrder: {
        total: 0,
        repairOrder: {
            total: 0,
            finishd: 0,
            labor: 0,
            aI: 0
        },
        maintainOrder: {
            total: 0,
            finishd: 0,
            addOrderTotal: 0
        }
    }
});
const locationName = ref();
const loading = ref(true);

getequipmentarealocationlist().then((res) => {
    if (res.code === 200) {
        res.data
            .map((item) => ({ label: item.name, value: item.value }))
            .forEach((i) => {
                loactionOption.value.push(i);
            });
        // loactionOption.value.push(res.data.map((item) => ({ label: item.name, value: item.value })));
        form.value.areaLocation = loactionOption.value[0].value;
        form.value.time = getDate();
        time.value = getdatas();
        form.value.startDate = form.value.time;
        form.value.endDate = form.value.time;
        locationName.value = loactionOption.value.find((item) => form.value.areaLocation == item.value)?.label;
        // const loadingInstance = ElLoading.service();
        getequipmentmaintainreportdata({
            areaLocation: form.value.areaLocation,
            reportType: form.value.reportType,
            startDate: form.value.startDate + " 00:00:00",
            endDate: form.value.endDate + " 00:00:00"
        })
            .then((res) => {
                if (res.code === 200) {
                    data.value = res.data;
                }
                loading.value = false;
                // loadingInstance.close();
            })
            .catch(() => {
                loading.value = false;
                // loadingInstance.close();
            });
    }
});
onMounted(() => { });

const search = () => {
    time.value = getdatas();
    if (form.value.reportType == 1) {
        typeName.value = "日";
        form.value.startDate = form.value.time;
        form.value.endDate = form.value.time;
    } else if (form.value.reportType == 2) {
        typeName.value = "周";
        form.value.startDate = getMonday("s", 0, form.value.time);
        form.value.endDate = getMonday("e", 0, form.value.time);
    } else {
        typeName.value = "月";
        form.value.startDate = getMonth("s", 0, form.value.time);
        form.value.endDate = getMonth("e", 0, form.value.time);
    }
    const loadingInstance = ElLoading.service();
    getequipmentmaintainreportdata({
        areaLocation: form.value.areaLocation,
        reportType: form.value.reportType,
        startDate: form.value.startDate + " 00:00:00",
        endDate: form.value.endDate + " 00:00:00"
    })
        .then((res) => {
            if (res.code === 200) {
                data.value = res.data;
            }
            loadingInstance.close();
        })
        .catch(() => {
            loadingInstance.close();
        });
};
const down = () => {
    const pdf = new PdfLoader(document.querySelector(".page"), "区域运维" + typeName.value + "报");
    pdf.getPDF();
    JSZipUtils.getBinaryContent("../区域运维日周月报.docx", function (error, content) {
        // model.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
            throw error;
        }
        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new docxtemplater().loadZip(zip);
        doc.setData({
            time: time.value,
            locationName: locationName.value,
            typeName: typeName.value,
            guarantee: data.value.guarantee,
            healthDegre: data.value.healthDegre,
            exception: data.value.exception,
            plan: data.value.plan,
            detail: data.value.detail,
            total: data.value.workOrder.total,
            repairOrderTotal: data.value.workOrder.repairOrder.total,
            repairOrderFinishd: data.value.workOrder.repairOrder.finishd,
            repairOrderLabor: data.value.workOrder.repairOrder.labor,
            repairOrderAI: data.value.workOrder.repairOrder.aI,
            maintainOrderTotal: data.value.workOrder.maintainOrder.total,
            maintainOrderFinishd: data.value.workOrder.maintainOrder.finishd,
            maintainOrderAddOrderTotal: data.value.workOrder.maintainOrder.addOrderTotal
        });
        doc.render();
        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, "区域运维" + typeName.value + "报.docx");
    });
};
</script>
<style lang="less" scoped>
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.page {
    padding: 30px 26px;
    width: 794px;
    margin: 0 auto;
    font-family: SimHei;
    line-height: 30px;
}

.box-text-small {
    font-size: 16px;
    padding-top: 20px;
}

th,
td {
    padding: 5px;
    vertical-align: baseline;
}

table,
th,
td {
    border: 1px solid black;
    text-align: left;
}

table {
    border-collapse: collapse;
    width: 95%;
}

.table {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
}

.box {
    margin-top: 16px;
    padding: 0 20px;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: center;

    .box-text {
        font-size: 20px;
    }

    .boxs {
        padding-top: 20px;
    }

    .box-title {
        display: flex;
        flex-direction: column;
        align-items: center;

        .box-title-type {
            font-size: 24px;
        }

        .box-title-loaction {
            margin-top: 30px;
        }
    }
}

::v-deep(.el-input__wrapper) {
    width: 100%;
}

.search {
    padding: 20px 24px 0;
    background: #fff;

    .search-text {
        font-size: 14px;
        font-weight: 400;
        color: #1b3646;
        padding-right: 12px;
    }
}

.create {
    background-color: #00428e;
}
</style>
